import {View, Text, StyleSheet, Image, TouchableOpacity, ScrollView} from 'react-native'
import React, {Component} from 'react'
import {padding, rectWithSize, default as styles} from "../../../../style";
import {AppIcon} from "../../../../assets/icon/AppIcon";
import {Actions} from "react-native-router-flux";
import {inject, observer} from "mobx-react/custom";
import {IncomeIntegralByType, IncomeStore} from "../../../../store/modules/user/income";
import {Store} from "../../../../store";
import moment from 'moment';
import {dateFormat, defaultArr, randomNumber} from "../../../../util";
import {convertIncomeTypeToUrlLabel, IncomeIconType} from "./incomeDetailConfig";
import EmptyTip from "../../../common/EmptyTip";

interface IncomeDetailListProps extends Store {
    index: number,
    tabLabel: string,
    tag: string
}

interface IncomeDetailListState {
    incomeIntegralList: IncomeIntegralByType[]
}


@inject("income")
@observer
export default class IncomeDetailList extends Component<IncomeDetailListProps, IncomeDetailListState> {

    income: IncomeStore;
    state = {
        incomeIntegralList: defaultArr
    };
    dateRange = [];

    constructor(props: IncomeDetailListProps) {
        super(props);
        this.income = this.props.income;

    }


    async componentDidMount() {
        if (this.props.tag === "TODAY") {
            const today = moment();
            this.dateRange = [dateFormat(today.startOf("day")), dateFormat(today.endOf("day"))];
        }
        const data = await this.income.getUserIncomeModuleByDateRange(this.dateRange);
        this.setState({
            incomeIntegralList: data
        }, () => {
        });

    }

    render() {

        const {incomeIntegralList} = this.state;
        return (incomeIntegralList.length ? <View style={IncomeDetailListStyle.container}>
            {incomeIntegralList.map(({type, integral}, index) => {
                const incomeType = convertIncomeTypeToUrlLabel(type);
                return (<TouchableOpacity onPress={() => {
                    if (type !== 3 && type !== 5) {
                        Actions.push("IncomeDetail", {
                            type,
                            dateRange: this.dateRange
                        })
                    }

                }} key={index} style={[{
                    marginTop: 1,
                    backgroundColor: "#fff"
                }, padding(10, 20), IncomeDetailListStyle.rowStyle]}>
                    <View style={IncomeDetailListStyle.rowStyle}>
                        <Image source={incomeType.url} style={rectWithSize(40)}/>
                        <Text style={{
                            marginLeft: 10,
                            fontSize: 14,
                            color: "#000"
                        }}>{incomeType.label}</Text>
                    </View>
                    <View style={IncomeDetailListStyle.rowStyle}>
                        <Text style={{
                            marginRight: 6,
                            fontSize: 14,
                            color: "#434343",
                            lineHeight: 22
                        }}> {integral} 分</Text>
                        <AppIcon name={"youjiantou"} size={14} color={"#9d9d9d"}/>
                    </View>
                </TouchableOpacity>)
            })}
        </View> : <EmptyTip style={{marginTop: 30}}/>)
    }
}

const IncomeDetailListStyle = StyleSheet.create({
    container: {},
    rowStyle: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between"
    }
});

 